<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<script src="/css_js/jquery.min.js"></script>
		<script src="/css_js/layui/layer/layer.js"></script>
	</head>
	<a href="http://layer.layui.com/" target="_blank">layer home</a>

	<body>
		<ul class="layer_notice" hidden="">
			<li>
				<a href="http://fly.layui.com/jie/5366/" target="_blank">1. layer 系列常见问题的处理和相关实用干货集锦</a>
			</li>
			<li>
				<a href="https://github.com/sentsin/layer/blob/master/CHANGELOG.md" target="_blank">2. layer 所有版本完整更新日志</a>
			</li>
			<li>
				<a href="http://fly.layui.com/jie/2461.html" target="_blank">3. 关注 layui 微信公众号，随时随地获取最新动态</a>
			</li>
		</ul>

		<div class="clearfix layer-area" id="chutiyan">

			<a class="layui-btn layui-btn-primary" href="javascript:;">初体验</a>
			<a class="layui-btn layui-btn-primary" href="javascript:;">第三方扩展皮肤</a>
			<a class="layui-btn layui-btn-primary" href="javascript:;">询问层</a>
			<a class="layui-btn layui-btn-primary" href="javascript:;">提示层</a>
			<a class="layui-btn layui-btn-primary" href="javascript:;">墨绿深蓝风</a>
			<a class="layui-btn layui-btn-primary" href="javascript:;" style="_display:none;">捕获页</a>
			<a class="layui-btn layui-btn-primary" href="javascript:;">页面层</a>
			<a class="layui-btn layui-btn-primary" href="javascript:;">自定页</a>
			<a class="layui-btn layui-btn-primary" href="javascript:;">tips层</a>
			<a class="layui-btn layui-btn-primary" href="javascript:;">iframe层</a>
			<a class="layui-btn layui-btn-primary" href="javascript:;">iframe窗</a>
			<a class="layui-btn layui-btn-primary" href="javascript:;">加载层</a>
			<a class="layui-btn layui-btn-primary" href="javascript:;">loading层</a>
			<a class="layui-btn layui-btn-primary" href="javascript:;">小tips</a>
			<a class="layui-btn layui-btn-primary" href="javascript:;">prompt层</a>
			<a class="layui-btn layui-btn-primary" href="javascript:;">tab层</a>
			<a class="layui-btn layui-btn-primary" href="javascript:;">相册层</a>
			<a class="layui-btn layui-btn-primary" href="http://www.layui.com/demo/layim.html" target="_blank">WebIM</a>
		</div>
		<pre id="demo1" class="layui-code" lay-height="380px" lay-title="上述示例对应代码">
特别说明：事件需自己绑定，以下只展现调用代码。
<p>//初体验</p>
layer.alert('内容')

<p>//第三方扩展皮肤</p>
layer.alert('内容', {
  icon: 1,
  skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，<a target="_balnk" style="color:#00B2E2;" href="http://layer.layui.com/skin.html#publish">去这里查阅</a>
})

<p>//询问框</p>
layer.confirm('您是如何看待前端开发？', {
  btn: ['重要','奇葩'] //按钮
}, function(){
  layer.msg('的确很重要', {icon: 1});
}, function(){
  layer.msg('也可以这样', {
    time: 20000, //20s后自动关闭
    btn: ['明白了', '知道了']
  });
});
<p>//提示层</p>
layer.msg('玩命提示中');

<p>//墨绿深蓝风</p>
layer.alert('墨绿风格，点击确认看深蓝', {
  skin: 'layui-layer-molv' //样式类名
  ,closeBtn: 0
}, function(){
  layer.alert('偶吧深蓝style', {
    skin: 'layui-layer-lan'
    ,closeBtn: 0
    ,anim: 4 //动画类型
  });
});

<p>//捕获页</p>
layer.open({
  type: 1,
  shade: false,
  title: false, //不显示标题
  content: $('.layer_notice'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
  cancel: function(){
    layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
  }
});

<p>//页面层</p>
layer.open({
  type: 1,
  skin: 'layui-layer-rim', //加上边框
  area: ['420px', '240px'], //宽高
  content: 'html内容'
});

<p>//自定页</p>
layer.open({
  type: 1,
  skin: 'layui-layer-demo', //样式类名
  closeBtn: 0, //不显示关闭按钮
  anim: 2,
  shadeClose: true, //开启遮罩关闭
  content: '内容'
});

<p>//tips层</p>
layer.tips('Hi，我是tips', '吸附元素选择器，如#id');

<p>//iframe层</p>
layer.open({
  type: 2,
  title: 'layer mobile页',
  shadeClose: true,
  shade: 0.8,
  area: ['380px', '90%'],
  content: 'mobile/' //iframe的url
}); 

<p>//iframe窗</p>
layer.open({
  type: 2,
  title: false,
  closeBtn: 0, //不显示关闭按钮
  shade: [0],
  area: ['340px', '215px'],
  offset: 'rb', //右下角弹出
  time: 2000, //2秒后自动关闭
  anim: 2,
  content: ['test/guodu.html', 'no'], //iframe的url，no代表不显示滚动条
  end: function(){ //此处用于演示
    layer.open({
      type: 2,
      title: '很多时候，我们想最大化看，比如像这个页面。',
      shadeClose: true,
      shade: false,
      maxmin: true, //开启最大化最小化按钮
      area: ['893px', '600px'],
      content: '//fly.layui.com/'
    });
  }
});

<p>//加载层</p>
var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2

<p>//loading层</p>
var index = layer.load(1, {
  shade: [0.1,'#fff'] //0.1透明度的白色背景
});

<p>//小tips</p>
layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {
  tips: [1, '#3595CC'],
  time: 4000
});

<p>//prompt层</p>
layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
  layer.close(index);
  layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
    layer.close(index);
    layer.msg('演示完毕！您的口令：'+ pass +'&lt;br&gt;您最后写下了：'+text);
  });
});

<p>//tab层</p>
layer.tab({
  area: ['600px', '300px'],
  tab: [{
    title: 'TAB1', 
    content: '内容1'
  }, {
    title: 'TAB2', 
    content: '内容2'
  }, {
    title: 'TAB3', 
    content: '内容3'
  }]
});

<p>//相册层</p>
$.getJSON('test/photos.json?v='+new Date, function(json){
  layer.photos({
    photos: json //格式见API文档手册页
    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
  });
});
  </pre>

		<script>
			var gather = {
				htdy: $('html, body')
			};
			gather.demo1 = $('#demo1');
			$('#chutiyan>a').on('click', function() {
				var othis = $(this),
					index = othis.index();
				switch(index) {
					case 0:
						var icon = -1;
						(function changeIcon() {
							var index = layer.alert('Hi，你好！ 点击确认更换图标', {
								icon: icon,
								shadeClose: true,
								title: icon === -1 ? '初体验 - layer ' + layer.v : 'icon：' + icon + ' - layer ' + layer.v
							}, changeIcon);
							if(8 === ++icon) layer.close(index);
						}());
						break;
					case 1:
						var icon = 0;
						(function changeIcon1() {
							var index = layer.alert('点击确认更换图标', {
								icon: icon,
								shadeClose: true,
								skin: 'layer-ext-moon',
								title: icon === -1 ? '第三方扩展皮肤' : 'icon：' + icon
							}, changeIcon1);
							if(9 === ++icon) {
								layer.confirm('怎么样，是否很喜欢该皮肤，去下载？', {
									skin: 'layer-ext-moon'
								}, function(index, layero) {
									layero.find('.layui-layer-btn0').attr({
										href: 'http://layer.layui.com/skin.html',
										target: '_blank'
									});
									layer.close(index);
								});
							};
						}());
						break;

					case 2:
						//询问框
						layer.confirm('您是如何看待前端开发？', {
							btn: ['重要', '奇葩'] //按钮
						}, function() {
							layer.msg('的确很重要', {
								icon: 1
							});
						}, function() {
							layer.msg('也可以这样', {
								time: 20000, //20s后自动关闭
								btn: ['明白了', '知道了']
							});
						});
						break;

					case 3:
						//提示层
						layer.msg('玩命提示中');
						break;

					case 4:
						//墨绿深蓝风
						layer.alert('墨绿风格，点击确认看深蓝', {
							skin: 'layui-layer-molv' //样式类名
								,
							closeBtn: 0
						}, function() {
							layer.alert('偶吧深蓝style', {
								skin: 'layui-layer-lan',
								closeBtn: 0,
								anim: 4 //动画类型
							});
						});
						break;

					case 5:
						//捕获页
						layer.open({
							type: 1,
							shade: false,
							title: false, //不显示标题
							content: $('.layer_notice'), //捕获的元素
							cancel: function() {
								layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {
									time: 5000,
									icon: 6
								});
							}
						});
						break;

					case 6:
						//页面层
						layer.open({
							type: 1,
							title:'df',
							skin: 'layui-layer-rim', //加上边框
							area: ['420px', '240px'], //宽高
							content: '<div style="padding: 10px;">任意html内容</div>'
						});
						break;

					case 7:
						layer.open({
							type: 1,
							skin: 'layui-layer-demo',
							closeBtn: false,
							area: '350px',
							anim: 2,
							shadeClose: true,
							content: '<div style="padding:20px;">即传入skin:"样式名"，然后你就可以为所欲为了。<br>你怎么样给她整容都行<br><br><br>我是华丽的酱油==。</div>'
						});
						break;

					case 8:
						layer.tips('Hi，我是tips', this);
						break;

					case 9:
						//iframe层
						layer.open({
							type: 2,
							title: 'layer mobile页',
							shadeClose: true,
							shade: 0.8,
							area: ['380px', '90%'],
							content: 'mobile/' //iframe的url
						});
						break;

					case 10:
						//iframe窗
						layer.open({
							type: 2,
							title: false,
							closeBtn: 0, //不显示关闭按钮
							shade: [0],
							area: ['340px', '215px'],
							offset: 'rb', //右下角弹出
							time: 2000, //2秒后自动关闭
							anim: 2,
							content: ['test/guodu.html', 'no'], //iframe的url，no代表不显示滚动条
							end: function() { //此处用于演示
								layer.open({
									type: 2,
									title: '很多时候，我们想最大化看，比如像这个页面。',
									shadeClose: true,
									shade: false,
									maxmin: true, //开启最大化最小化按钮
									area: ['893px', '600px'],
									content: '//fly.layui.com/'
								});
							}
						});
						break;

					case 11:
						var ii = layer.load(0, {
							shade: false
						});
						setTimeout(function() {
							layer.close(ii)
						}, 5000);
						break;
					case 12:
						var iii = layer.load(1, {
							shade: [0.1, '#fff']
						});
						setTimeout(function() {
							layer.close(iii)
						}, 3000);
						break;
					case 13:
						layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', this, {
							tips: [1, '#3595CC'],
							time: 4000
						});
						break;
					case 14:
						layer.prompt({
							title: '输入任何口令，并确认',
							formType: 1
						}, function(pass, index) {
							layer.close(index);
							layer.prompt({
								title: '随便写点啥，并确认',
								formType: 2
							}, function(text, index) {
								layer.close(index);
								layer.msg('演示完毕！您的口令：' + pass + '<br>您最后写下了：' + text);
							});
						});
						break;
					case 15:
						layer.tab({
							area: ['600px', '300px'],
							tab: [{
								title: '无题',
								content: '<div style="padding:20px; line-height:30px; text-align:center">欢迎体验layer.tab<br>此时此刻不禁让人吟诗一首：<br>一入前端深似海<br>从此妹纸是浮云<br>以下省略七个字<br>。。。。。。。<br>——贤心</div>'
							}, {
								title: 'TAB2',
								content: '<div style="padding:20px;">TAB2该说些啥</div>'
							}, {
								title: 'TAB3',
								content: '<div style="padding:20px;">有一种坚持叫：layer</div>'
							}]
						});
						break;
					case 16:
						if(gather.photoJSON) {
							layer.photos({
								photos: gather.photoJSON
							});
						} else {
							//							$.getJSON('test/photos.json?v=' + new Date, {}, function(json) {
							//								gather.photoJSON = json;
							//								layer.photos({
							//									photos: json
							//								});
							//							});

							json = {
								"status": 1,
								"msg": "",
								"title": "JSON请求的相册",
								"id": 8,
								"start": 0,
								"data": [{
										"alt": "layer",
										"pid": 109,
										"src": "/favicon.png",
										"thumb": ""
									},
									{
										"alt": "说好的，一起Fly",
										"pid": 110,
										"src": "/img/bg.jpg",
										"thumb": ""
									}
								]
							};
							layer.photos({
								photos: json
							});

						}
						break;
					default:
						layer.msg('Hi!');
						break;
				}

				//定位到对应的
				var p = gather.demo1.find('p').eq(index);
				var top = p.parent().position().top;
				var ol = gather.demo1.find('.layui-code-ol');

				gather.demo1.find('.layui-code-ol').animate({
					scrollTop: ol.scrollTop() + top
				}, 0);
			});
		</script>
	</body>

</html>